<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>收支流水</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_historyfeesummary.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <style>
        .aui-list-item-arrow:before {
            border: none;
        }

        .choose_room_content {
            margin: 20px;
            position: absolute;
            top: 2rem;
            bottom: 20px;
            left: 20px;
            right: 20px;
            overflow: scroll;
            z-index: 10001;
        }

        .choose_room_item {
            position: relative;
            padding-left: 40px;
            padding-bottom: 20px;
        }

        .choose_room_item input[type='checkbox'] {
            position: absolute;
            top: 7px;
            left: 0;
        }

        .choose_room_item label {
            line-height: 1.5rem;
        }
        .list_txt span{
            border-left: none;
            padding-left: 15px;
        }
        .tongjipart{
            width: 49%;
            padding-right: 5px;
        }
        .list_countmsg{
            margin-top: 0px;
            padding-left: 0px;
            height: auto;
            line-height: 1.2rem;
            background: none;
        }
        .tongjibtn{
            text-align: right;
            font-size: 0.7rem;
            color: #828c9a;
        }
        .tongjibtn i{
            font-size: 0.6rem;
            position: relative;
            top:-1px;
        }

        .costnum{
            color: #000;
        }
        .costnum span{
            font-size: 0.9rem;
        }
        .content_list .aui-list-item .aui-list-item-inner{
            width: auto;
            padding-left: 10px;
        }
        .roomfeeitem{
            font-size: 0.6rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <div v-if="showsearchparam" class="searchparam nomenu" style="height: 70%;">
            <div class="searchcontent" style="height: 100%;">
                <div class="searchparamtitle">
                    收款方式
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectChargeMoneyType(item.ID)"
                        v-bind:class="{'active':form.ChargeMoneyTypes.indexOf(item.ID)>-1}"
                        v-for="item in chargeMoneyTypeList">{{item.Name}}</label>
                </div>
                <div class="searchparamtitle">
                    收费项目
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectChargeCategory(item.ID)"
                        v-bind:class="{'active':form.ChargeIDList.indexOf(item.ID)>-1}"
                        v-for="item in chargeSummaryList">{{item.Name}}</label>
                </div>
                <div class="searchparamtitle">
                    项目名称
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectProject(item.ID)"
                        v-bind:class="{'active':form.ProjectIDs.indexOf(item.ID)>-1}"
                        v-for="item in projectList">{{item.Name}}</label>
                </div>
                <div class="aui_bottom" style="background: #fff; border-radius: 0px 0px 14px 14px;">
                    <div v-on:click="doReset(1)" class="aui_bottombtn left">重置</div>
                    <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
                </div>
            </div>
        </div>
        <div v-if="showsearchmonth" class="searchparam nomenu">
            <div class="searchparamtitle">
                时间
            </div>
            <div class="searchparamitem">
                <label v-bind:class="{'active':form.activeDate==1}" v-on:click="doClickDay(1)">今日</label>
                <label v-bind:class="{'active':form.activeDate==2}" v-on:click="doClickDay(2)">本月</label>
                <label v-bind:class="{'active':form.activeDate==3}" v-on:click="doClickDay(3)">本年</label>
            </div>
            <div class="searchparamtitle">
                自定义收款日期
            </div>
            <div class="searchparamitem searchparamitem_input">
                <i class="icon iconfont icon-rili"></i>
                <span class="choose new-span-date" id="startdate" data-options='{"type":"date"}'
                    v-bind:class="{'textColorPlaceholder':form.startTime==''}">{{form.startTime==''?'开始日期':form.startTime}}</span>
                <!--<input v-on:click="do_select_time(1)" readonly="readonly" v-model="form.startTime" type="text" placeholder="开始日期">-->
                <span style="padding: 0 10px;">
                    至
                </span>
                <span class="choose new-span-date" id="enddate" data-options='{"type":"date"}'
                    v-bind:class="{'textColorPlaceholder':form.endTime==''}">{{form.endTime==''?'结束日期':form.endTime}}</span>
                <!--<input v-on:click="do_select_time(2)" readonly="readonly" v-model="form.endTime" type="text" placeholder="结束日期">-->
            </div>
            <div class="aui_bottom">
                <div v-on:click="doReset(2)" class="aui_bottombtn left">重置</div>
                <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
            </div>
        </div>
        <div v-if="showsearchroom" class="searchparam nomenu" style="height: 60%;">
            <div class="searchparamtitle">
                选择房间
            </div>
            <div class="choose_room_content" style="margin-bottom: 5rem;">
                <div v-on:click="doSelectRoom(item)" class="choose_room_item" v-for="item in roomList">
                    <input v-bind:checked="item.isSelected" type="checkbox" class="aui-checkbox" />
                    <label>{{item.name}}</label>
                </div>
            </div>
            <div class="aui_bottom">
                <div v-on:click="doReset(3)" class="aui_bottombtn left">重置</div>
                <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
            </div>
        </div>
        <div class="search_box fixedbox bgshadow">
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchparam}" v-on:click="doSelectSearchParam(1)">
                筛选
                <i v-if="!showsearchparam" class="icon iconfont icon-down"></i>
                <i v-if="showsearchparam" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchmonth}" v-on:click="doSelectSearchParam(2)">
                {{form.activeDateDesc}}
                <i v-if="!showsearchmonth" class="icon iconfont icon-down"></i>
                <i v-if="showsearchmonth" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <!-- v-if="roomId>0" -->
            <div  class="searchitem" v-bind:class="{'chkedbox':showsearchroom}" v-on:click="doSelectSearchParam(3)">
                {{form.activeRoomName}}
                <i v-if="!showsearchroom" class="icon iconfont icon-down"></i>
                <i v-if="showsearchroom" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <!-- <div class="searchtotal">
                总计:<label>{{form.TotalCost}}</label>
            </div> -->
        </div>
        <div class="aui-content"  style="margin-top: 2.8rem;">
            <div class="list_txt"><span>{{form.startTime}} 至 {{form.endTime}} 统计</span></div>
            <div>
                <div class="boxarea mainbox" style="padding-bottom: 20px; overflow: hidden;">
                    <div class="list_countmsg fl" style="width: 84%;">
                        <div class="tongjipart fl" style="border-right: solid 0.5px #fff;">
                            <div>收款-共计{{form.TotalCount}}笔</div>
                            <div class="costnum">+<span>{{form.TotalCost>0?form.TotalCost:0}}</span></div>
                        </div>
                        <div class="tongjipart fr" style="padding-left: 5px;">
                            <div>支出-共计{{form.TotalBackCount}}笔</div>
                            <div class="costnum">-<span>{{form.TotalBackCost>0?form.TotalBackCost:0}}</span></div>
                        </div> 
                    </div>
                    <div v-on:click="do_open_tongji()" class="tongjibtn" style="text-align: right; font-size: 0.65rem;">统计<i class="icon iconfont icon-xiangyoujiantou"></i></div>
                </div>
                <!-- <div class="boxarea mainbox content_list" style="margin-top:20px;">

                    <div class="aui-list-item">
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="roomfeeitem">
                                <label class="leftcontent name_sty aui-ellipsis-1">水韵书香</label>
                                <label class="rightcontent cost_sty">158</label>
                                <div class="cl">
                                </div>
                            </div>
                            <div class="roomfeeitem" style="padding-bottom:10px;">
                                <label class="leftcontent time_sty aui-ellipsis-1">2020-07-28</label>
                                <label class="rightcontent type_sty">现金</label>
                                <div class="cl">
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <div v-if="list.length>0" class="boxarea mainbox content_list" style="margin-top:15px;">
                    <div class="aui-list-item" v-for="item in list" v-on:click="doOpenDetail(item.ID)"
                        style="margin-top: 10px; overflow: hidden;">
                        <div v-if="item.ChargeState==1" class="pic"><i class="icon iconfont icon-shoukuanguanli"></i></div>
                        <div v-if="item.ChargeState!=1" class="pic" style="background: #fbf3ef;"><i class="icon iconfont icon-xianxiashoukuan" style=" font-size: 0.8rem; color: #f5873e;"></i></div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="roomfeeitem">
                                <label class="leftcontent name_sty aui-ellipsis-1">{{item.FullName}}</label>
                                <label class="rightcontent cost_sty"
                                    v-if="item.ChargeState==1">{{item.RealCost.toFixed(2)}}</label>
                                <label class="rightcontent cost_sty"
                                    v-if="item.ChargeState!=1">-{{item.RealCost.toFixed(2)}}</label>
                                <div class="cl">
                                </div>
                            </div>
                            <div class="roomfeeitem"  style="color: #828c9a;">
                                {{item.ChargeTypeName}}
                            </div>
                            <div class="roomfeeitem" style="padding-bottom:10px;">
                                <label class="leftcontent time_sty aui-ellipsis-1">{{item.ChargeTime}}</label>
                               
                                <div class="cl">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div  class="boxarea mainbox content_list" style="margin-top:15px;">
                    <div class="aui-list-item" 
                        style="margin-top: 10px; overflow: hidden;">
                        <div class="pic"><i class="icon iconfont icon-shoukuanguanli"></i></div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="roomfeeitem">
                                <label class="leftcontent name_sty aui-ellipsis-1">回复i给忽然法人和航哥</label>
                                <label class="rightcontent cost_sty">231.44</label>
                                <div class="cl">
                                </div>
                            </div>
                            <div class="roomfeeitem" style="color: #828c9a;">
                               现金
                            </div>
                            <div class="roomfeeitem" style="padding-bottom:10px;">
                                <label class="leftcontent time_sty aui-ellipsis-1">2022-07-23</label>
                                <div class="cl">
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->






                <div v-if="list.length<=0" class="nodata">暂无相关数据</div>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/page/dateRangeUtil.js"></script>
<script type="text/javascript" src="js/analysis_historyfeelist.js"></script>

</html>